<template>
  <div>
    <div class="container mt-3">
      <div class="card mb-3">
        <div class="card-header">单张上传</div>
        <div class="card-body">
          <div class="d-flex">
            <input
              type="file"
              class="form-control-file flex-1 mr-2"
              ref="uploadInput"
              @change="onFileChange"
            />

            <button class="btn btn-default" @click="onUploadFile">上传</button>
          </div>
          <div v-if="fileResult">
            <p>上传结果：</p>
            <div class="d-flex">
              <a :href="fileResult" target="_blank" class="flex-1">{{ fileResult }}</a>
              <button class="btn btn-text" @click="deleteFileUrl(fileResult)">删除</button>
            </div>
          </div>
        </div>
      </div>

      <div class="card mb-3">
        <div class="card-header">多张上传</div>
        <div class="card-body">
          <div class="d-flex mb-3">
            <input
              type="file"
              class="form-control-file flex-1 mr-2"
              ref="uploadMultipleInput"
              multiple
              @change="onMultipleFileChange"
            />
            <button class="btn btn-default" @click="onMultipleUploadFile">上传</button>
          </div>
          <div v-if="filesResult && filesResult.length">
            <p>上传结果：</p>
            <ul class="list-unstyled">
              <li v-for="(item, index) in filesResult" :key="index" class="d-flex">
                <a :href="item" target="_blank" class="flex-1">{{ item }}</a>
                <button class="btn btn-text" @click="deleteMultipleFileUrl(index)">删除</button>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header">删除文件</div>
        <div class="card-body">
          <div class="d-flex">
            <textarea
              class="form-control flex-1 mr-2"
              v-model="fileUrl"
              placeholder="多张文件换行"
              rows="5"
            ></textarea>
            <button class="btn btn-default" @click="onDeleteFile">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadFile, deleteFile } from '@/common/api/upload'

export default {
  components: {},
  props: {},
  data() {
    return {
      // 单张
      file: null,
      fileResult: '',
      // 多张
      files: null,
      filesResult: [],
      // 删除
      fileUrl: '',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 单张上传
    async onFileChange(e) {
      this.file = e.target.files[0]
      this.fileResult = ''
    },

    async onUploadFile() {
      if (!this.file) {
        return this.$message.error('select a file')
      }

      const res = await uploadFile({
        file: this.file,
        dir: 'test/abc',
        // type: 0,
      })

      const { uploadInput } = this.$refs
      if (uploadInput) {
        uploadInput.value = ''
      }

      this.file = null
      this.fileResult = res

      this.$message.success('上传成功')
    },

    // 多张上传
    onMultipleFileChange(e) {
      this.files = e.target.files
      this.filesResult = []
    },

    async onMultipleUploadFile() {
      if (!this.files) {
        return this.$message.error('select a file')
      }

      const res = await uploadFile({
        file: this.files,
        dir: 'test',
      })

      const { uploadMultipleInput } = this.$refs
      if (uploadMultipleInput) {
        uploadMultipleInput.value = ''
      }

      this.files = null
      this.filesResult = res

      this.$message.success('上传成功')
    },

    async onDeleteFile() {
      if (!this.fileUrl) {
        return this.$message.error('input file url')
      }

      const arr = this.fileUrl.split(/\r?\n/).map(it => it.trim())
      await deleteFile(arr)
      this.fileUrl = ''

      this.$message.success('删除成功')
    },

    async deleteFileUrl(url) {
      await deleteFile(url)
      this.fileResult = ''
      this.$message.success('删除成功')
    },

    async deleteMultipleFileUrl(index) {
      const url = this.filesResult[index]
      await deleteFile(url)
      this.filesResult.splice(index, 1)
      this.$message.success('删除成功')
    },
  },
}
</script>

<style lang="scss" scoped></style>
